@import "../styles";

.angular-editor {
  display: flex;
  flex-direction: column;
  gap: var(--ae-gap, 5px);

  &.bottom {
    flex-direction: column-reverse;
  }

  ::ng-deep [contenteditable=true]:empty:before {
    content: attr(placeholder);
    color: #868e96;
    opacity: 1;
  }

  .angular-editor-wrapper {
    position: relative;

    .angular-editor-textarea {
      min-height: 150px;
      overflow: auto;
      resize: vertical;

      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        display: block;
        width: 8px;
        height: 8px;
        cursor: nwse-resize;
        background-color: rgba(255, 255, 255, 0.5)
      }
    }

    .angular-editor-textarea {
      min-height: 5rem;
      padding: 0.5rem 0.8rem 1rem 0.8rem;
      border-radius: var(--ae-text-area-border-radius, 0.3rem);
      border: var(--ae-text-area-border, 1px solid #ddd);
      background-color: transparent;
      overflow-x: hidden;
      overflow-y: auto;
      position: relative;

      &:focus,
      &.focus {
        outline: var(--ae-focus-outline-color, -webkit-focus-ring-color auto 1px);
      }

      ::ng-deep blockquote {
        margin-left: 1rem;
        border-left: 0.2em solid #dfe2e5;
        padding-left: 0.5rem;
      }
    }

    ::ng-deep p {
      margin-bottom: 0;
    }

    .angular-editor-placeholder {
      display: none;
      position: absolute;
      top: 0;
      padding: 0.6rem 0.8rem 1rem 0.9rem;
      color: #6c757d;
      opacity: 0.75;
    }

    &.show-placeholder {
      .angular-editor-placeholder {
        display: block;
      }
    }

    &.disabled {
      cursor: not-allowed;
      opacity: 0.5;
      pointer-events: none;
    }
  }
}
